// // function getElementPath(element) {
// //     let path = [];
// //     while (element.parentElement) {
// //       let tagName = element.tagName.toLowerCase();
// //       let siblingIndex = Array.from(element.parentElement.children).indexOf(element) + 1;
// //       path.unshift(`${tagName}:nth-child(${siblingIndex})`);
// //       element = element.parentElement;
// //     }
// //     path.unshift('html');
// //     return path.join(' > ');
// //   }

// // function getElementPath(element) {
// //     let path = [];
// //     while (element.parentElement) {
// //         let selector;
// //         if (element.id) {
// //             selector = `#${element.id}`;
// //         } else if (element.className) {
// //             selector = `.${element.className.split(' ').join('.')}`;
// //         } else {
// //             selector = element.tagName.toLowerCase();
// //         }
// //         path.unshift(selector);
// //         element = element.parentElement;
// //     }
// //     path.unshift('html');
// //     return path.join(' > ');
// // }

// document.addEventListener('click', function (event) {

//     console.log('click',event);
//     // console.log(event.target);
//     // console.log(JSON.stringify(event.target));  
//     // console.log('click');
//     // event.preventDefault();
//     // let path = getElementPath(event.target);
//     // console.log('path',path);
//     // alert('标签为: ' + path);
//     // navigator.clipboard.writeText(path).then(() => {
//     //     alert('标签为: ' + path);
//     // });  
// }, { once: false });




// function getElementPath(element) {
//     let path = [];
//     while (element.parentElement) {
//         let selector;
//         if (element.id) {
//             selector = `#${element.id}`;
//         } else if (element.className) {
//             selector = `.${element.className.split(' ').join('.')}`;
//         } else {
//             selector = element.tagName.toLowerCase();
//         }
//         path.unshift(selector);
//         element = element.parentElement;
//     }  
//     path.unshift('html');
//     return path.join(' > ');
// }

// document.addEventListener('DOMContentLoaded', function () {
//     console.log('DOMContentLoaded');
//     document.querySelectorAll('*').forEach(function (el) {
//         console.log('querySelectorAll',el);
//         el.addEventListener('mouseover', function (e) {
//             console.log('mouseover',e);  
//             e.stopPropagation();
//             e.preventDefault();
//             el.classList.add('highlight');
//             console.log('Element Tag:', el.tagName);
//             console.log('Element ID:', el.id);
//             console.log('Element Name:', el.getAttribute('name'));
//             console.log('Element Text:', el.innerText);

//             let path = getElementPath(el);
//             console.log('Element Path:', path);
//         });

//         el.addEventListener('mouseout', function () {
//             el.classList.remove('highlight');
//         });

//         el.addEventListener('click', function (event) {
//             event.preventDefault();
//             let path = getElementPath(event.target);
//             alert('标签为: ' + path);
//         });
//     });
// });



// document.addEventListener('mouseover', function (e) {
//     console.log('mouseover',e);  
//     e.stopPropagation();
//     e.preventDefault();
//     // document.classList.add('highlight');
//     console.log('Element Tag:', el.tagName);
//     console.log('Element ID:', el.id);
//     console.log('Element Name:', el.getAttribute('name'));
//     console.log('Element Text:', el.innerText);

//     let path = getElementPath(el);
//     console.log('Element Path:', path);
// });




// function getElementPath(element) {
//     let path = [];
//     while (element.parentElement) {
//         let selector;
//         if (element.id) {
//             selector = `#${element.id}`;
//         } else {
//             let siblings = Array.from(element.parentElement.children).filter(sibling => sibling.tagName.toLowerCase() === element.tagName.toLowerCase());
//             let index = siblings.indexOf(element) + 1;
//             selector = element.tagName.toLowerCase();
//             if (siblings.length > 1) {
//                 selector += `[${index}]`;
//             }
//         }
//         path.unshift(selector);
//         element = element.parentElement;
//     }
//     path.unshift('html');
//     return path.join(' > ');
// }

// function highlightElements() {
//     document.querySelectorAll('*').forEach(function (el) {
//         console.log('querySelectorAll',el);
//         el.addEventListener('mouseover', function (e) {
//             e.stopPropagation();
//             e.preventDefault();
//             el.classList.add('highlight');
//             console.log('Element Tag:', el.tagName);
//             console.log('Element ID:', el.id);
//             console.log('Element Name:', el.getAttribute('name'));
//             console.log('Element Text:', el.innerText);
 
//             let path = getElementPath(el);
//             console.log('Element Path:', path);
//         });

//         el.addEventListener('mouseout', function () {
//             el.classList.remove('highlight');
//         });

//         el.addEventListener('click', function (event) {
//             event.preventDefault();
//             let path = getElementPath(event.target);
//             alert('标签为: ' + path);
//         });
//     },{ once: true });
// }

// // Ensure the script runs when the DOM is fully loaded
// if (document.readyState === 'loading') {
//     document.addEventListener('DOMContentLoaded', highlightElements);
// } else {
//     highlightElements();
// }





/* 获取元素的层级标签  */
function getElementPath(element) {
    let path = [];
    while (element.parentElement) {
        let selector;
        if (element.id) {
            selector = `#${element.id}`;
        } else {
            let siblings = Array.from(element.parentElement.children).filter(sibling => sibling.tagName.toLowerCase() === element.tagName.toLowerCase());
            let index = siblings.indexOf(element) + 1;
            selector = element.tagName.toLowerCase();
            if (siblings.length > 1) {
                selector += `[${index}]`;
            }
        }
        path.unshift(selector);
        element = element.parentElement;
    }
    path.unshift('html');
    return path.join(' > ');
}


/* 监听鼠标移动事件 */
document.addEventListener('mouseover', function (e) {
    console.log('mouseover', e);
    e.stopPropagation();
    e.preventDefault();
   
    let el = e.target;
    el.classList.add('highlight');

    // // Log element information
    // console.log('Element Tag:', el.tagName);
    // console.log('Element ID:', el.id);
    // console.log('Element Name:', el.getAttribute('name'));
    // console.log('Element Text:', el.innerText);

    let path = getElementPath(el);
    console.log('Element Path:', path);

    // Clean up previous highlights
    el.addEventListener('mouseout', function () {
        el.classList.remove('highlight');
    });
});
